<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .active{
        background-color: #099;
    }
</style>
</head>

<body>
    <!-- 宿主文件 -->
    <div id="app">
       <span v-bind:title="message">hi bind message</span> <br>
       {{ title }}:counter is {{counter}}
        <p>now: {{date}}</p>
        <div>{{message}}</div>
        <button @click="reverseMessage">reverse message</button>
        
        <h4>双向绑定</h4>
        <input v-model="course"  @keydown.enter="addCourse" type="text" />
        <button @click = "addCourse">新增</button>
        
        <br>
        --------------------------------<br>
        <!-- 列表渲染 -->
        <h4>列表渲染</h4>
        <p v-if="courses.length == 0">没有任何课程</p>
        <ul  v-else>
           <!-- <li v-for="c in courses" :key="c" :class="{active:(selectedCourse === c)}" @click = "selectedCourse = c"> {{ c }}</li> -->
           <li v-for="c in courses" :key="c" :style="{backgroundColor: ( selectedCourse === c ) ? '#099' : 'transparent'}" @click = "selectedCourse = c"> {{ c }}</li>
        </ul> 
    </div>

    <div id="app2"></div>


    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="./vue3.js"></script>
    <script>
        const app = {
            data() {
                return {
                    title: "hello vue!",
                    counter: '0',
                    date:'',
                    selectedCourse:'',
                    message:'hi message!',
                    course:'',
                    courses:[]
                }
            },
            mounted() {
                setTimeout(() => {
                    this.title = "new vue content!";
                     this.courses = ["初级web前端工程师","中级数据分析工程师","高级架构工程师"];
                }, 3000);

                setInterval(() => {
                    this.counter++;
                }, 1000);
                
                setInterval(() => {
                    this.date = new Date().toLocaleString();
                }, 1000);
            },
            methods: {
                reverseMessage(){
                    this.message = this.message.split('').reverse().join('');
                },
                addCourse(){
                   this.courses.push(this.course);
                   this.course = '';
                }
            },
        };

        Vue.createApp(app).mount('#app');
        console.log(app.render);
    </script>
</body>

</html>